﻿<template>
  <a-collapse activeKey="1" expand-icon-position="right">
    <a-collapse-panel key="1" header="查询条件">
      <a-form-model :model="params" ref="paramsForm" :labelCol="{ md: { span: 6 }, xs: { span: 24 }, sm: { span: 12 } }" :wrapperCol="{ md: { span: 18 }, xs: { span: 24 }, sm: { span: 12 } }">
        <a-row>
          <a-col :xs='24' :sm='24' :md='6' :lg='6' :xl='6' :xxl='6'>
            <a-form-model-item label='账号'>
              <a-input v-model.trim='params.account' placeholder='请输入账号' v-keyupEnter='{ callback: handleRefresh }' />
            </a-form-model-item>
          </a-col>
          <a-col :xs='24' :sm='24' :md='6' :lg='6' :xl='6' :xxl='6'>
            <a-form-model-item label='邮箱'>
              <a-input v-model.trim='params.email' placeholder='请输入邮箱' v-keyupEnter='{ callback: handleRefresh }' />
            </a-form-model-item>
          </a-col>
          <a-col :xs='24' :sm='24' :md='6' :lg='6' :xl='6' :xxl='6'>
            <a-form-model-item label='昵称'>
              <a-input v-model.trim='params.nickName' placeholder='请输入昵称' v-keyupEnter='{ callback: handleRefresh }' />
            </a-form-model-item>
          </a-col>
          <a-col :xs='24' :sm='24' :md='6' :lg='6' :xl='6' :xxl='6'>
            <a-form-model-item label='手机号'>
              <a-input v-model.trim='params.phone' placeholder='请输入手机号' v-keyupEnter='{ callback: handleRefresh }' />
            </a-form-model-item>
          </a-col>
          <a-col :xs='24' :sm='24' :md='6' :lg='6' :xl='6' :xxl='6'>
            <a-form-model-item label='微信账户'>
              <a-input v-model.trim='params.weChartAccount' placeholder='请输入微信账户' v-keyupEnter='{ callback: handleRefresh }' />
            </a-form-model-item>
          </a-col>
          <a-col :xs='24' :sm='24' :md='6' :lg='6' :xl='6' :xxl='6'>
            <a-form-model-item label='状态'>
              <a-switch v-model='params.status' un-checked-children='禁用' checked-children='启用' />
            </a-form-model-item>
          </a-col>

          <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" :xxl="6" style="text-align: right">
            <a-form-model-item>
              <a-button icon="search" type="primary" :loading="loading" @click="handleRefresh">查询</a-button>
              <a-divider type="vertical" />
              <a-button icon="reload" @click="handleReset">重置</a-button>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-collapse-panel>
  </a-collapse>
</template>
<script>

export default {
  props: {
    loading: {
      type: Boolean,
    },
  },
  data() {
    return {

      // 要查询的参数
      params: {
        account: null,
        email: null,
        nickName: null,
        phone: null,
        weChartAccount: null,
        status: true,
      },
    }
  },
  created() {

  },
  methods: {
    //#region 查询数据
    handleRefresh() {
      this.$emit('handleRefresh')
    },
    //#endregion

    //#region 重置
    handleReset() {
      this.params.account = ''
      this.params.email = ''
      this.params.nickName = ''
      this.params.phone = ''
      this.params.weChartAccount = ''
      this.params.status = true
    },
    //#endregion
  },
}
</script>
